import { ref, onUnmounted, onMounted } from "vue";

interface Direction {
  hornzital: string;
  vertical: string;
}

export default function useAutoScroll(direction: keyof Direction) {
  const listenDom = ref<null | HTMLElement>(null);
  let maxMove = 0;

  const Hover = (e: any) => {
    const parentWidth = listenDom.value?.parentElement?.offsetWidth;
    const childWidth = listenDom.value?.offsetWidth;
    if (typeof childWidth === "number" && typeof parentWidth === "number") {
      maxMove = childWidth - parentWidth;
    }
    if (e.target) {
      e.target.style = `transition: all linear 5s; left: -${maxMove}px`;
    }
  };

  const HoverOut = (e: any) => {
    if (e.target) {
      e.target.style = ` left: 0px`;
    }
  };

  onMounted(() => {
    if (direction === "hornzital") {
      if (listenDom) {
        listenDom.value?.addEventListener("mouseenter", Hover);
        listenDom.value?.addEventListener("mouseleave", HoverOut);
      }
    }
  });

  return { listenDom };
}
